<template>
    <div class="comment">
      <div class="submitbox">
        <h3>提交评论</h3>
        <div>
          <mt-field placeholder="请输入评论内容" type="textarea" rows="4" v-model="inputVal" @keydown.native.enter="pushComments"></mt-field>   <mt-button size="small" type="primary" plain @click="pushComments">发表</mt-button>
        </div>
      </div>
      <div class="commentbox">
        <h3 class="line">评论详情</h3>
        <ul>
          <li v-for="(item,index) in newsCommentList" :key="index">
            <h4 class="comment-content">{{item.content}}</h4>
            <p>
              <span class="comment-user">{{item.user_name}}</span>
              <span class="comment-time">{{item.add_time | fmtTime}}</span>
            </p>
          </li>
        </ul>
      </div>
      <div class="button-group">
        <mt-button type="danger" size="large" plain @click="loadMore" v-if="MoreBtn">加载更多</mt-button>
        <mt-button size="large" disabled plain v-else>暂无更多评论</mt-button>
      </div>
    </div>
</template>
<script>
import {getNewsComments, postComments} from '@/api'
import qs from 'qs'
import { Toast } from 'mint-ui'
export default {
  props: ['id'],
  data () {
    return {
      inputVal: '',
      pageIndex: 1,
      newsCommentList: [],
      MoreBtn: true
    }
  },
  created () {
    this.renderComments()
  },
  methods: {
    // 渲染留言板块
    renderComments () {
      getNewsComments(this.id, this.pageIndex)
        .then(res => {
          // console.log(res)
          // this.newsCommentList = res.message
          let cmtAll = [...this.newsCommentList]
          this.newsCommentList = [...cmtAll, ...res.message]
          if (res.message.length < 10) {
            // this.pageIndex = 1
            // this.inputVal = ''
            this.MoreBtn = false
          }
        })
    },
    // 点击加载更多
    loadMore () {
      this.pageIndex++
      this.renderComments()
    },
    // 发表评论
    pushComments () {
      let content = {content: this.inputVal}
      let contentStr = qs.stringify(content)
      if (!this.inputVal.trim()) {
        Toast('评论不能为空,请重新输入')
      } else {
        postComments(this.id, contentStr)
          .then(res => {
            Toast({
              message: '评论成功',
              iconClass: 'icon icon-success'
            })
            this.pageIndex = 1
            this.inputVal = ''
            this.newsCommentList = []
            this.renderComments()
          })
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.inputbox {
  border: 1px solid #999;
}
.comment h3 {
  font-weight: bold;
  margin: 10px 0;
  font-size: 14px;
}
.line {
  border-top: 1px solid #999;
  padding-top: 10px;
}
.commentbox{
  li:not(:last-child) {
    border-bottom: 1px solid #999;
    margin: 5px 0;
  }
  p {
    font-size: 14px;
  }
  .comment-content {
    color: #999;
    font-size: 14px;
  }
}
.comment-user, .comment-time {
  font-size: 12px;
  color: #26a2ff;
}
</style>
